<template>

    <div class="headtop">
        <div class="headbody">
            <div>
                <van-image width="6rem" height="6rem" fit="cover" radius="1.2rem" :src="avatarimg" />
            </div>
            <div>
                <p class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-light text-shadow-lg">{{
                    proxy.$user.value.username }}</p>
                <p class="text-light/80 text-lg text-shadow-lg">账号：{{ proxy.$user.value.email }}</p>
            </div>
        </div>
        <van-uploader :after-read="afterRead" :max-count="1"
            accept="image/jpeg,image/png,image/webp,image/bmp,image/tiff">
            <p class="editimg"><van-icon name="edit" />更换头像</p>
        </van-uploader>
    </div>

    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <!-- 用户名 -->
            <van-field v-model="username" name="username" label="用户名：" placeholder="请输入用户名" class="editfield"
                @change="ChangeUsername" />

            <!-- 学校 -->
            <van-field required v-model="schooltext" is-link readonly name="school" label="学校：" placeholder="点击选择学校"
                class="editfield" @click="schoolshow = true" />
            <van-popup v-model:show="schoolshow" destroy-on-close position="bottom">
                <van-picker :columns="schools" :model-value="schoolindex" @confirm="schoolConfirm"
                    @cancel="schoolshow = false" />
            </van-popup>

            <!-- 性别 -->
            <van-field v-model="genders[gender].text" is-link readonly name="gender" label="性别：" placeholder="点击选择性别"
                class="editfield" @click="gendershow = true" />
            <van-popup v-model:show="gendershow" destroy-on-close position="bottom">
                <van-picker :columns="genders" :model-value="genderindex" @confirm="genderConfirm"
                    @cancel="gendershow = false" />
            </van-popup>

            <!-- 生日 -->
            <van-field v-model="birthday" is-link readonly name="birthday" label="生日" placeholder="点击选择生日"
                class="editfield" @click="birthshow = true" />
            <van-popup v-model:show="birthshow" destroy-on-close position="bottom">
                <van-date-picker :model-value="birthdayvalue" @confirm="birthdayConfirm"
                    @cancel="birthdayPicker = false" :min-date="minDate" :max-date="maxDate" type="date" />
            </van-popup>

            <!-- 地区 -->
            <van-field v-model="code" is-link readonly name="code" label="地区选择" placeholder="点击选择省市区" class="editfield"
                @click="codeshow = true" />
            <van-popup v-model:show="codeshow" destroy-on-close position="bottom">
                <van-area :area-list="areaList" :model-value="codeValue" @confirm="onConfirm"
                    @cancel="codeshow = false" />
            </van-popup>

            <!-- 联系方式 -->
            <van-field v-model="lianxi" name="username" label="联系方式：" placeholder="(对外主页装饰)" class="editfield"
                @change="ChangeUsername" />

            <!-- 个性签名 -->
            <van-field v-model="gexing" name="username" label="个性签名：" placeholder="(对外主页装饰)" class="editfield"
                @change="ChangeUsername" />

        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="onSubmit" class="sub">
                提交
            </van-button>
        </div>
        <div style="margin: 16px;">
            <van-button round block type="primary" @click="onBack" class="back">
                返回
            </van-button>
        </div>
    </van-form>
</template>

<script setup>
import { areaList } from '@vant/area-data';
const { proxy } = getCurrentInstance();
const user = proxy.$user.value;
const username = ref(user.username)
const avatarimg = ref(user.avatar_url)
const formData = new FormData();
//挂载前执行
onBeforeMount(async () => {
    const res = await proxy.$http.post({
        url: '/school/schoolList',
        params: {}
    })
    if (res.code == 1) {
        res.data.forEach(item => {
            schools.push({ text: item.name, value: item.id })
        })
    } else {
        proxy.$fail(res.msg)
    }
})

const params = {
    id: user.id,
}

const ChangeUsername = (e) => {
    params.username = username.value;
    // formData.append('username', username.value);
}

// 学校选择
const school = ref(user.schoolid ?? '0');
const schoolshow = ref(false);
const schoolindex = ref([school.value])
const schooltext = ref(user.school.name)
var schools = reactive([{ text: '请选择学校', value: 0 }]);
const schoolConfirm = ({ selectedValues, selectedOptions }) => {
    school.value = selectedOptions[0].value
    schooltext.value = selectedOptions[0].text
    schoolindex.value = selectedValues
    params.schoolid = school.value
    // formData.append('schoolid', school.value);
    schoolshow.value = false;
};

// 性别选择
const gender = ref(user.gender);
const genderindex = ref([gender.value]);
const gendershow = ref(false);
const genders = [
    { text: '保密', value: '0' },
    { text: '男', value: '1' },
    { text: '女', value: '2' },
]
const genderConfirm = ({ selectedValues, selectedOptions }) => {
    gender.value = selectedOptions[0].value;
    genderindex.value = selectedValues;
    params.gender = gender.value;
    // formData.append('gender', gender.value);
    gendershow.value = false;
};

//生日选择
const birthday = ref(user.birthday_text ?? '');
const birthshow = ref(false);
const minDate = new Date('1900-01-01');
const maxDate = new Date();
const birthdayvalue = ref(birthday.value.split('-'));

const birthdayConfirm = ({ selectedValues }) => {
    birthday.value = selectedValues.join('-');
    birthdayvalue.value = selectedValues;
    params.birthday = +new Date(birthday.value) / 1000;
    // formData.append('birthday', +new Date(birthday.value));
    birthshow.value = false;
}

//地区选择
const code = ref(user.region_text ?? '');
const codeshow = ref(false);
const codeValue = ref((user.district ? user.district : (user.city ? user.city : user.province)));

console.log(user);

const onConfirm = ({ selectedValues, selectedOptions }) => {
    codeValue.value = selectedValues.length
        ? selectedValues[selectedValues.length - 1]
        : '';
    codeshow.value = false;
    code.value = selectedOptions.map((item) => item.text).join('/');
    params.region = codeValue.value;
    // formData.append('region', codeValue.value);
};

//头像上传
const afterRead = (file) => {
    avatarimg.value = file.objectUrl;
    params.avatar = file.file;
    // formData.append('avatar', file.file);
};

const onSubmit = async () => {
    const res = await proxy.$http.upload({
        url: '/user/editprofile',
        params: params,
    })
    if (res.code == 1) {
        proxy.$success(res.msg)
        setTimeout(() => {
            proxy.$router.push('/user')
        }, 1250)
    } else {
        proxy.$fail(res.msg)
    }
}

const onBack = () => {
    proxy.$router.push('/user')
}
</script>

<style scoped>
.headtop {
    width: 100%;
    height: 11rem;
    background-color: rgb(25, 25, 25);
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 处理bug */
    margin-bottom: 0.5rem;
}

.headbody {
    display: flex;
    width: 100%;
    height: 6rem;
    margin-top: 1.5rem;
}

.headbody div {
    margin-left: 0.5rem;
}

.headbody p:nth-child(1) {
    font-size: 1.5rem;
    line-height: 3rem;
    /* 缩进 */
    text-indent: 0.8rem;
    /* 字间距 */
    letter-spacing: 0.1rem;
    color: white;
}

.headbody p:nth-child(2) {
    font-size: 1rem;
    line-height: 3rem;
    text-indent: 0.8rem;
    color: aliceblue;
}

.editimg {
    margin-left: 1rem;
    margin-top: 0.5rem;
    /* 下划线*/
    text-decoration: underline;
    background: linear-gradient(90deg,
            rgba(209, 64, 64, 0.8),
            rgba(117, 250, 255, 0.9),
            rgba(255, 77, 181, 0.8));
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 4px rgba(255, 77, 181, 0.2);
    animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% center;
        text-shadow: 0 1px 2px rgb(250, 71, 71);
    }

    50% {
        background-position: 100% center;
        text-shadow: 0 2px 3px rgb(93, 188, 243);
    }

    100% {
        background-position: 0% center;
        text-shadow: 0 1px 2px rgba(244, 70, 171, 0.2);
    }
}

.editfield {
    height: 4rem;
    line-height: 3rem;
    background-color: rgb(25, 25, 25);
    font-size: 1.1rem;
    --van-field-input-text-color: rgb(255, 255, 255);
    --van-field-placeholder-text-color: rgba(255, 255, 255, 0.45);
    --van-field-label-color: aliceblue;
}

.editfield .van-field__right-icon {
    align-self: center !important;
    margin-top: 0 !important;
}

.sub {
    background: linear-gradient(-45deg,
            rgba(227, 67, 67, 0.6),
            rgba(41, 189, 203, 0.7),
            rgba(53, 113, 196, 0.8),
            rgba(195, 40, 169, 0.7),
            rgba(231, 79, 130, 0.6));
    background-size: 300% 300%;
    animation: fluidGradient 8s ease infinite;
    transition: all 0.5s ease;
    font-size: 1.1rem;
}

.back {
    background: linear-gradient(-45deg,
            rgba(227, 67, 67, 0.6),
            rgba(195, 40, 169, 0.7),
            rgba(53, 113, 196, 0.8),
            rgba(41, 189, 203, 0.7),
            rgba(227, 67, 67, 0.6));
    background-size: 300% 300%;
    animation: fluidGradient 8s ease infinite;
    transition: all 0.5s ease;
    font-size: 1.1rem;
}

@keyframes fluidGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
</style>
